<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>卡片详情 - 卡片式任务记录系统</title>
  <!-- 引入Element UI样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入自定义样式 -->
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/card-detail.css">
</head>
<body>
  <div id="app">
    <el-container class="main-container">
      <!-- 头部区域 -->
      <el-header height="auto">
        <div class="header-content">
          <div class="header-left">
            <el-button icon="el-icon-back" @click="goBack">返回</el-button>
            <h2>卡片详情</h2>
          </div>
          <div class="header-right">
            <el-button type="primary" icon="el-icon-edit" @click="editCardContent">编辑内容</el-button>
          </div>
        </div>
      </el-header>
      
      <!-- 主体区域 -->
      <el-main>
        <el-row :gutter="20">
          <!-- 左侧卡片详情 -->
          <el-col :xs="24" :sm="24" :md="16" :lg="18" :xl="18">
            <el-card class="card-detail-box">
              <div slot="header" class="card-header">
                <el-row :gutter="20">
                  <el-col :xs="24" :sm="18">
                    <el-input
                      v-model="cardData.title"
                      placeholder="卡片标题"
                      :disabled="!editMode"
                      @blur="saveCardInfo"
                    ></el-input>
                  </el-col>
                  <el-col :xs="24" :sm="6" class="header-actions">
                    <el-button-group>
                      <el-button size="small" icon="el-icon-edit" @click="toggleEditMode"></el-button>
                      <el-button size="small" icon="el-icon-share"></el-button>
                      <el-button size="small" icon="el-icon-delete" type="danger" @click="deleteCard"></el-button>
                    </el-button-group>
                  </el-col>
                </el-row>
              </div>
              
              <!-- 卡片内容区 -->
              <div class="card-content" @dblclick="editCardContent">
                <div v-html="cardData.content"></div>
              </div>
              
              <el-divider></el-divider>
              
              <!-- 卡片状态区 -->
              <div class="card-status-section">
                <el-row :gutter="20">
                  <el-col :xs="24" :sm="12" :md="8" :lg="6">
                    <div class="status-item">
                      <span class="label">创建时间:</span>
                      <span>{{ cardData.createTime }}</span>
                    </div>
                  </el-col>
                  <el-col :xs="24" :sm="12" :md="8" :lg="6">
                    <div class="status-item">
                      <span class="label">最后更新:</span>
                      <span>{{ cardData.updateTime }}</span>
                    </div>
                  </el-col>
                  <el-col :xs="24" :sm="12" :md="8" :lg="6">
                    <div class="status-item">
                      <span class="label">状态:</span>
                      <el-select 
                        v-model="cardData.status" 
                        size="small" 
                        :disabled="!editMode"
                        @change="saveCardInfo"
                      >
                        <el-option
                          v-for="item in statusOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </div>
                  </el-col>
                  <el-col :xs="24" :sm="12" :md="8" :lg="6">
                    <div class="status-item">
                      <span class="label">优先级:</span>
                      <el-select 
                        v-model="cardData.priority" 
                        size="small" 
                        :disabled="!editMode"
                        @change="saveCardInfo"
                      >
                        <el-option
                          v-for="item in priorityOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </div>
                  </el-col>
                </el-row>
                
                <el-row :gutter="20" class="mt-20">
                  <el-col :xs="24" :sm="12" :md="8" :lg="6">
                    <div class="status-item">
                      <span class="label">责任人:</span>
                      <el-select 
                        v-model="cardData.ownerUuid" 
                        size="small" 
                        :disabled="!editMode"
                        @change="saveCardInfo"
                      >
                        <el-option
                          v-for="item in userOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </div>
                  </el-col>
                  <el-col :xs="24" :sm="12" :md="8" :lg="6">
                    <div class="status-item">
                      <span class="label">创建人:</span>
                      <span>{{ cardData.creator }}</span>
                    </div>
                  </el-col>
                  <el-col :xs="24" :sm="12" :md="8" :lg="6">
                    <div class="status-item">
                      <span class="label">标签:</span>
                      <el-select
                        v-model="cardData.tags"
                        multiple
                        collapse-tags
                        size="small"
                        :disabled="!editMode"
                        @change="saveCardInfo"
                      >
                        <el-option
                          v-for="item in tagOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </div>
                  </el-col>
                  <el-col :xs="24" :sm="12" :md="8" :lg="6">
                    <div class="status-item">
                      <span class="label">截止日期:</span>
                      <el-date-picker
                        v-model="cardData.endTime"
                        type="datetime"
                        placeholder="选择日期时间"
                        size="small"
                        :disabled="!editMode"
                        @change="saveCardInfo"
                        style="width: 160px;">
                      </el-date-picker>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-card>
            
            <!-- 评论区域 -->
            <el-card class="comment-box">
              <div slot="header" class="comment-header">
                <span>评论 ({{ comments.length }})</span>
              </div>
              
              <div class="comment-list">
                <div v-for="(comment, index) in comments" :key="index" class="comment-item">
                  <el-avatar :size="40" :src="comment.userAvatar">{{ comment.userName.charAt(0) }}</el-avatar>
                  <div class="comment-content">
                    <div class="comment-info">
                      <span class="comment-user">{{ comment.userName }}</span>
                      <span class="comment-time">{{ comment.createTime }}</span>
                    </div>
                    <div class="comment-text">{{ comment.content }}</div>
                  </div>
                </div>
              </div>
              
              <div class="comment-input">
                <el-input
                  type="textarea"
                  :rows="3"
                  placeholder="输入评论内容..."
                  v-model="newComment"
                ></el-input>
                <div class="comment-actions">
                  <el-button type="primary" @click="submitComment">发表评论</el-button>
                </div>
              </div>
            </el-card>
          </el-col>
          
          <!-- 右侧信息栏 -->
          <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="6">
            <el-card class="stats-box">
              <div slot="header" class="stats-header">
                <span>卡片统计</span>
              </div>
              
              <div class="stats-item">
                <i class="el-icon-view"></i>
                <span class="stats-label">浏览量</span>
                <span class="stats-value">{{ cardData.views }}</span>
              </div>
              
              <div class="stats-item">
                <i class="el-icon-star-off"></i>
                <span class="stats-label">收藏量</span>
                <span class="stats-value">{{ cardData.collections }}</span>
              </div>
              
              <div class="stats-item">
                <i class="el-icon-download"></i>
                <span class="stats-label">下载量</span>
                <span class="stats-value">{{ cardData.downloads }}</span>
              </div>
              
              <div class="stats-item">
                <i class="el-icon-thumb"></i>
                <span class="stats-label">点赞量</span>
                <span class="stats-value">{{ cardData.likes }}</span>
              </div>
              
              <el-divider></el-divider>
              
              <div class="action-buttons">
                <el-button type="info" icon="el-icon-star-off" plain @click="collectCard">收藏</el-button>
                <el-button type="success" icon="el-icon-download" plain @click="downloadCard">下载</el-button>
                <el-button type="warning" icon="el-icon-thumb" plain @click="likeCard">点赞</el-button>
              </div>
            </el-card>
            
            <el-card class="history-box">
              <div slot="header" class="history-header">
                <span>修改历史</span>
              </div>
              
              <el-timeline>
                <el-timeline-item
                  v-for="(activity, index) in cardHistory"
                  :key="index"
                  :timestamp="activity.time"
                  :type="activity.type"
                >
                  {{ activity.content }}
                </el-timeline-item>
              </el-timeline>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
  
  <!-- 引入Vue.js -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <!-- 引入Element UI组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- 引入卡片详情页JS -->
  <script src="./js/card-detail.js"></script>
</body>
</html> 